<template>
  <el-container>
    <!-- <el-header>
    header
  </el-header> -->
    <el-main>
      <el-row>
        <el-col :span="16" style="margin-left: 15% ;width:1015px">
          <el-menu
            
            class="el-menu-demo"
            mode="horizontal"

          >
            <el-menu-item index="1"
              >全部商品<font color="red">25</font></el-menu-item
            >
            <el-button type="primary" style="float: right;">结算</el-button>
            <font
              size="3px"
              style="float: right; margin-right: 2px; margin-top: 10px"
            >
              已选商品(不含运费):<font color="red">$999999999999</font>
            </font>
          </el-menu>
        </el-col>
      </el-row>
      <el-row style="margin-left: 15%">
        <el-col :span="3">
          <el-checkbox v-model="checked">全选</el-checkbox>
        </el-col>
        <el-col :span="8"> 商品信息 </el-col>
        <el-col :span="2"> 单价(元) </el-col>
        <el-col :span="2"> 数量 </el-col>
        <el-col :span="2"> 金额(元) </el-col>
        <el-col :span="3"> 操作 </el-col>
      </el-row>

      <el-row style="margin-left: 15%; margin-top: 15px">
        <el-col :span="5">
          <el-checkbox v-model="checked"></el-checkbox
          ><i class="el-icon-s-goods" style="margin-left: 10px"
            >:包子馒头山东馒头</i
          >
        </el-col>
      </el-row>
      <el-row style="margin-left: 15%; margin-top: 15px">
        <el-col
          :span="3"
          style="
            height: 150px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background-color: #eae8e8;
          "
        >
          <el-col :span="1"
            ><el-checkbox
              v-model="checked"
              style="margin-left: 10px; margin-top: 12px; width: 1px"
            ></el-checkbox
          ></el-col>
          <img
            src="..\assets\aaa.jpg"
            style="width: 100px; margin-left: 25px; margin-top: 15px"
          />
        </el-col>
        <el-col
          :span="5"
          style="
            height: 150px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background-color: #eae8e8;
          "
        >
          包子馒头山东馒头，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        </el-col>
        <el-col
          :span="3"
          style="
            height: 150px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background-color: #eae8e8;
            padding-top: 20px;
          "
        >
          <el-col><i style="float: right"></i></el-col>
          <el-col style="width: 80px">颜色分类：尺寸：</el-col>
        </el-col>
        <el-col
          :span="2"
          style="
            height: 150px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background-color: #eae8e8;
            padding-top: 50px;
          "
        >
          促销价格:<font color="red">30</font>
        </el-col>
        <el-col
          :span="2"
          style="
            height: 150px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background-color: #eae8e8;
            padding-top: 50px;
          "
        >
          <el-input-number
            v-model="num"
            @change="handleChange"
            :min="1"
            :max="10"
            label="描述文字"
            size="mini"
            style="width: 90px"
          ></el-input-number>
        </el-col>
        <el-col
          :span="2"
          style="
            height: 150px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background-color: #eae8e8;
            padding-top: 50px;
          "
        >
          <font color="red">39</font>
        </el-col>
        <el-col
          :span="2"
          style="
            height: 150px;
            width:205px
            border: 1px solid rgba(0, 0, 0, 0.1);
            background-color: #eae8e8;
            padding-top: 50px;
          "
        >
          <div class="CheckOutBtn">
            <el-button type="primary">移入收藏夹</el-button>
            <el-button type="primary">删除</el-button>
          </div>
        </el-col>
      </el-row>


    </el-main>
  </el-container>
</template>


<script>
export default {
  name: "test1",
  data() {
    return {
      num: 1,
      checked: true,
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>

<style scoped>
.CheckOutBtn {
  margin-left: 5px;
}
</style>